<template>
    <div class="mtu">
        <div class="m-8">
      <vue3VideoPlay
        v-bind="options"
        :poster="options.poster"
        @play="onPlay"
        @pause="onPause"
        @timeupdate="onTimeupdate"
        @canplay="onCanplay"
      />
        </div>
    </div>
    
</template>
  
  <script setup lang="ts">
  import { reactive } from "vue";
  
  const options = reactive({
    width: "100%", //播放器宽度
    height: "300px", //播放器高度
    color: "#409eff", //主题色
    title: "测试", //视频名称
    src: "/assets/images/shop.mp4", //视频源 
    poster: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg", // 视频封面
    muted: false, //静音
    speed: true, // 关闭进度条拖动
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      "audioTrack",
      "quality",
      "speedRate",
      "volume",
      "setting",
      "pip",
      "pageFullScreen",
      "fullScreen",
    ], //显示所有按钮,
  });
  
  /**
   * 支持所有原生video事件
   */
  const onPlay = (ev) => {
    console.log("播放");
  };
  const onPause = (ev) => {
    console.log(ev, "暂停");
  };
  const onTimeupdate = (ev) => {
    console.log(ev, "时间更新");
  };
  const onCanplay = (ev) => {
    console.log(ev, "可以播放");
  };
  </script>
  <style>
    .m-8{
        /* background-image: url('/assets/images/shopProduct.jpg'); */
    }
    .mtu{
        width: 100%;
        height: 100%;
        background-image: url('/assets/images/shopProduct.jpg');
        background-size: cover;
        background-position: center center; /* 可选，确保背景图片居中 */
        background-repeat: no-repeat; /* 可选，确保背景图片不重复 */
        background-attachment: fixed; /* 可选，背景图片固定，不随滚动条滚动 */

    }
  </style>
  